/************************************自定义变量*************************************/
//纯黑背景
@table-black-background-color:#000000;
//标题文字
@table-title-color:#262626;
//正文文字
@table-body-color:#595959;
//辅助文字
@table-auxiliary-text-color:#8C8C8C;
//占位/禁用
@table-disabled-color:#BFBFBF;
//描边
@table-boder-color:#D9D9D9;
//分割线（深）
@table-split-deep-color:#E5E5E5;
//分割线（浅）
@table-split-shallow-color:#F0F0F0;
//浅灰背景
@table-light-gray-background-color:#F7F7F7;
//纯白背景
@table-pure-white-color:#FFFFFF;
/************************************表格变量-全局*************************************/
@primary-color:@primary-color;
//表格背景色
@table-background-color:#FFFFFF;
//字体
@table-font-family:@primary-font-family;
//标题字体加粗
@table-font-weight:500;
//TR TD
@table-padding:0 8px;
/************************************标题变量*************************************/
//标题背景色
@table-title-background-color:#F5F8FC;
//标题字体大小
@table-title-font-size:14px;
//标题字体颜色
@table-title-color: #1D2129;
/************************************标题筛选变量*************************************/
@table-filter-active-background:#E2E4EA;
/************************************内容变量*************************************/
//内容字体大小
@table-body-font-size:14px;
//内容字体加粗
@table-body-font-weight:400;
//内容字体颜色
@table-body-color: #1D2129;
//内容选中字体颜色
@table-body-current-row-color:#242424;
//内容选中背景颜色
@table-body-current-row-background:#F5F8FC;
//内容展开行 背景颜色
@table-body-expand-row-background:#FAFAFA;
/************************************滚动条变量*************************************/
//中间表格 右侧边框 滚动条 颜色
@table-scroll-color:#f5f7fa;
/************************************复选框变量*************************************/
//复选框默认颜色
@table-check-box-color:#c0c0c0;
//复选框样式
@font-face {
    font-family: 'c-font';
    src: url('../font/font_1603198_t4n3jew5xd.eot');
    src: url('../font/font_1603198_t4n3jew5xd.eot?#iefix') format('embedded-opentype'),
    url('../font/font_1603198_t4n3jew5xd.woff2') format('woff2'), url('../font/font_1603198_t4n3jew5xd.woff') format('woff'),
    url('../font/font_1603198_t4n3jew5xd.ttf') format('truetype'),
    url('../font/font_1603198_t4n3jew5xd.svg#c-font') format('svg');
}

.c-table {
    table-layout: fixed;
    background-color: @table-background-color;
    min-height: 25px;
    line-height: 25px;
    border-collapse: collapse;
    padding: 2px;
    th{
        background: @table-title-background-color;
        line-height: 38.4px;
        padding: @table-padding;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        span{
            width: 28px;
            height: 22px;
            font-size: @table-title-font-size;
            font-family: @table-font-family;
            font-weight: @table-font-weight;
            color: @table-title-color;
        }
        .c-edit-title{
            color:@primary-color;
        }
    }

}

.c-table-title-is-not-null:before{
    display: inline-block;
    margin-right: 2px;
    color: #ff4d4f;
    font-size: @table-title-font-size;
    font-family: @table-font-family;
    line-height: 1;
    vertical-align:middle;
    content: "*";
}

.c-table td {
    overflow: hidden;
    padding: @table-padding;
    word-wrap:break-word;
    text-overflow:inherit;
}

.c-title-table-body {
    overflow: hidden;
    position: relative;
    border-right-color: @table-scroll-color;
    border-right-style: solid;
}
.td-nowrap tr td {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.c-check-box {
    font-family: c-font;
    text-align: center;
    vertical-align: middle;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: 16px !important;
    cursor: pointer;
    color: @table-check-box-color;
}
.box-selected {
    color: @primary-color;
}

.c-table-current-row {
    background-color: @table-body-current-row-background !important;
    .c-default-font{
        //   color: @table-body-current-row-color;
    }
}

.c-table-td-edited-box {
    position: absolute;
    top:0px;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    border:15px solid transparent;
    border-bottom: 15px solid rgba(0,180,42,0.17);
    .c-table-td-edited-box-icon{
        position: absolute;
        left:-5px;
        top:5px;
        font-size:10px;
        transform: rotate(-45deg);
        color:@primary-color;
    }
}

.c-default-font{
    font-size: @table-body-font-size;
    font-family: @table-font-family;
    font-weight: @table-body-font-weight;
    color: @table-body-color;
}

.c-font-box {
    font-family: c-font;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    font-size: 30px !important;
    cursor: pointer;
    color: #d2d2d2;
}
.c-font-box.switch-selected {
    color: @primary-color;
}

.c-fiexd {
    position: absolute;
    z-index: 1;
    overflow-y: scroll;
    /* overflow: hidden; */
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
}
.c-fiexd::-webkit-scrollbar {
    width: 0px;
}

.c-table-body {
    position: relative;
}

.row-move-line {
    position: absolute;
    width: 100%;
    height: 1px;
    border-bottom: 2px solid @primary-color;
    z-index: 100;
}
.row-move-line-info {
    position: absolute;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    background-color: @table-background-color;
    text-align: center;
    line-height: 30px;
    font-size:@table-body-font-size;
    font-family:  @table-font-family;
    font-weight: @table-body-font-weight;
    color: @table-body-current-row-color;
    z-index: 100;
    opacity: 0.7;
    padding: 0px 5px;
    .row-move-line-info-row {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
    }
}
.remove-row-transition{
    transition:transform .2s,top .2s,height .2s,background-color .1s
}

//表格编辑区
.c-table-editor-box{
    position: absolute;
    z-index: 10;
    .c-table-editor-box-item {
        height: 100%;
        width: 100%;
        -moz-appearance: textfield;
    }
    > input {
        color:@primary-color;
        border:1px solid @primary-color;
        padding: 0 10px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        outline: none;
    }
    .c-table-editor-box-item .ant-select-selection{
        width: 100%;
        height: 100%;
        color:@primary-color;
        border:1px solid @primary-color;
        border-radius: 0px;
        .ant-select-selection__rendered{
            line-height:40px;
            .ant-select-search__field__wrap{
                line-height:34px;
            }
        }
        .ant-select-arrow{
            top: 20px;
        }
    }
    .c-table-editor-box-item .ant-calendar-picker-input{
        width: 100%;
        height: 40px;
        color:@primary-color;
        border:1px solid @primary-color;
        border-radius: 0px;
    }
}

//表格条件操作区
.c-params{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}
.c-params-setting{
    position: absolute;
    right: 0px;
    margin:0.5px 5px 0 5px;
    z-index: 1000;
    margin-top:0.8px;
    height: 39.2px;
    line-height: 39.2px;
    font-size:14px;
    cursor: pointer;
    color:@primary-color;
    background:@table-title-background-color;
}
.c-params-setting:hover{
    margin:0.5px 0 0 0;
    padding:0px 5px;
    background: @table-filter-active-background;
}
.c-params-setting-attr{
    background: @table-background-color;
    box-shadow: 0px 2px 8px 0px rgba(0,35,114,0.1);
    border-radius: 2px;
}

.c-params-attr{
    width: 479px;
    padding:10px 0;
    background: @table-background-color;
    box-shadow: 0px 2px 8px 0px rgba(0,35,114,0.1);
    border-radius: 2px;
    .c-params-attr-row{
        width: 475px;
        height: 128px;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        .c-params-attr-row-col{
            height: 22px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            >div{
                width:150px;
                font-size:@table-body-font-size;
                font-family: @table-font-family;
                font-weight: 400;
                color: #111822;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-end;
            }
        }
    }
    .c-params-attr-filter{
        margin:5px 16px 0px 16px;
        .c-params-attr-title{
            height: 22px;
            margin-bottom:8px;
            font-weight: 500;
            font-size: 14px;
            color: #222222;
        }
        .c-params-attr-title-close{
            float: right;
            padding:2px;
            cursor: pointer;
        }
        .c-params-attr-title-close:hover{
            background-color: rgba(44,104,255,0.06);
        }
        .c-params-attr-desc{
            font-size: 12px;
            font-weight: 400;
            color: #555555;
            .c-params-attr-desc-num{
                color:@primary-color;
            }
        }
        .c-params-attr-condition{
            width: 100%;
            margin: 8px 0px;
            overflow-y:auto;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            .ant-select-selection,.ant-input{
                border-radius: 2px;
                border: 1px solid #CCCCCC;
            }
            .c-params-attr-condition-button{
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-end !important;
            }
        }
        .c-params-attr-condition-add{
            margin-top: 8px;
        }
        .c-params-attr-footer{
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-end;
        }
    }
}

.c-sort{
    display: inline-block;
    position: relative;
    pointer-events: none;
    .c-sort-icon {
        position: absolute;
        display: flex;
        flex-flow:column;
        justify-content: space-evenly;
        top: -15px;
        left:-5px;
        font-size: 10px;
    }
}

.c-filter{
    position: absolute;
    top:0px;
    right: 5px;
    padding:0px 0px 0px 5px;
    line-height: 40px;
    background:@table-title-background-color;
}
.c-filter:hover,.c-filter-active-dropdown{
    right: 0px;
    padding:0px 5px 0px 5px;
    background: @table-filter-active-background;
}
.c-filter-active{
    color:@primary-color !important;
}
.c-filter-dropdown{
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(0,35,114,0.1);
    border-radius: 2px;
    .c-filter-dropdown-body{
        overflow-y: auto;
        .c-filter-dropdown-checkbox{
            display: flex;
            flex-flow: column;
            justify-content: flex-start;
        }
    }
    .ant-input{
        border:1px solid @primary-color;
        border-radius: 0px;
    }
    .c-filter-dropdown-div{
        padding:0px 8px 0px 16px;
        font-weight: 500;
        font-size: 14px;
        color: @primary-color;
        line-height: 40px;
        .ant-checkbox-wrapper{
            width: 100%;
        }
        .ant-checkbox-wrapper:hover{
            color:@primary-color;
        }
    }
    .c-filter-dropdown-div:hover{
        background: rgba(44,104,255,0.06);
    }
}

.c-no-data{
    width:100%;
    height: 152px;
    line-height:152px;
    text-align: center;
    border-left: 1px solid @table-split-shallow-color;
    border-right: 1px solid @table-split-shallow-color;
    border-bottom: 1px solid @table-split-shallow-color;
}

.c-expand-row{
    position: absolute;
    z-index:999;
    background: @table-body-expand-row-background;
    overflow: scroll;
}

.noSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.c-table-row-indent{
    float: left;
    height: 1px;
}

.c-table-row-expand-icon{
    text-decoration: none;
    cursor: pointer;
    transition: color .3s;
    position: relative;
    display: inline-flex;
    float: left;
    box-sizing: border-box;
    width: 19px;
    height: 19px;
    padding: 0;
    color: inherit;
    line-height: 19px;
    background: #fff;
    border: 1px solid @table-split-shallow-color;
    border-radius: 2px;
    outline: none;
    transform: scale(.94117647);
    transition: all .3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.c-table-row-indent+.c-table-row-expand-icon{
    margin-top: 2.5005px;
    margin-right: 8px;
}

.c-table-row-expand-icon:before{
    top: 8px;
    right: 3px;
    left: 3px;
    height: 1px;
}

.c-table-row-expand-icon:after{
    top: 3px;
    bottom: 3px;
    left: 8px;
    width: 1px;
    transform: rotate(90deg);
}

.c-table-row-expand-icon:before, .c-table-row-expand-icon:after{
    position: absolute;
    background: currentColor;
    transition: transform .3s ease-out;
    content: "";
}

.c-table-row-expand-icon-collapsed:before{
    transform: rotate(-180deg);
}

.c-table-row-expand-icon-collapsed:after{
    transform: rotate(0);
}
